<template>
  <div class="mask-container" @click="handleClick($event)">
    <transition name="ball" @after-enter="onAfterEnter">
      <svg-icon icon-name="musicBall" class="musicBall" v-if="ballShow" :style="{ top, left }"></svg-icon>
    </transition>
  </div>
</template>

<script>
import { ref, nextTick } from 'vue'
export default {
  emits: ['click'],
  setup(props, { emit }) {
    const left = ref(0)
    const top = ref(0)
    const ballShow = ref(false)
    function handleClick(event) {
      left.value = event.offsetX + 'px'
      top.value = event.offsetY + 'px'
      ballShow.value = true
      nextTick(() => {
        ballShow.value = false
      })
      emit('click')
    }
    function onAfterEnter() {
      ballShow.value = false
    }
    return {
      handleClick,
      left,
      top,
      ballShow,
      onAfterEnter
    }
  }
}
</script>

<style lang="scss" scoped>
//小球动画
.ball-leave-active {
  animation: fadeOutDown 1s;
}
.mask-container {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 11;
  .musicBall {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    color: $bar;
  }
}
</style>
